<template>
	<view class="my">
		<!-- 头部 头像 昵称 -->
		<view class="my_head flex flex--align-items--center">
			<view class="headimageBox">
				<image v-if="userInfo.header" :src="userInfo.header" mode="widthFix" style="width: 130rpx;"
					@tap="editInfo()" />
				<image v-else src="../../static/image/no_head.png" mode="widthFix" style="width: 130rpx;"
					@tap="editInfo()" />
			</view>

			<view style="width: 433rpx;">
				<text @tap="editInfo()">{{ userInfo.nickname }}</text>
			</view>
			<view class="iconfont icon-iconfontscan" style="font-size: 60rpx;padding: 0 10rpx;" @click="scanCode">
			</view>
		</view>
		<!-- 我的订单 -->
		<view class="my_order">
			<view class="my_order_title">我的订单</view>
			<view class="my_order_box flex flex--align-items--center flex--justify-content--space-around">
				<block v-for="item in orderTabList" :key="item.id">
					<view class="my_order_box_list flex flex--row flex--align-items--center" @click="goOrder(item.id)">
						<text>{{ item.count }}</text>
						<view>{{ item.title }}</view>
					</view>
				</block>
			</view>
		</view>
		<!-- 菜单-操作 -->
		<view class="my_box">
			<block v-if="userInfo.is_broker">
				<view class="my_box_list flex flex--align-items--center" @click="menuOpen(5)">
					<image src="/static/image/broker.png" mode=""></image>
					<view class="my_box_list_cen">
						<view class="my_box_list_cen_top">经纪人工作台</view>
						<view class="my_box_list_cen_bot">查看我的陪玩操作订单 提现区域</view>
					</view>
					<text class="icon iconfont iconyoubianjiantou"></text>
				</view>
			</block>

			<block v-for="(item, index) in boxList" :key="item.id">
				<view class="my_box_list flex flex--align-items--center" @click="menuOpen(item.id)">
					<image :src="item.src" mode=""></image>
					<view class="my_box_list_cen">
						<view class="my_box_list_cen_top">{{ item.title }}</view>
						<view class="my_box_list_cen_bot">{{ item.desc }}</view>
					</view>
					<text class="icon iconfont iconyoubianjiantou"></text>
					<template v-if="item.id === 2">
						<button class="my_box_list_btn" open-type="contact">客服</button>
					</template>
				</view>
			</block>

			<block>
				<view class="my_box_list flex flex--align-items--center" @click="logOut">
					<image src="/static/image/loginOut.png" mode=""></image>
					<view class="my_box_list_cen">
						<view class="my_box_list_cen_top">退出登录</view>
						<view class="my_box_list_cen_bot">切换账号</view>
					</view>
					<text class="icon iconfont iconyoubianjiantou"></text>
				</view>
			</block>
		</view>

		<view class="modalWrapper" v-if="showShareModal">
			<view class="modalWrapper_content">
				<view class="modalWrapper_title">
					<view></view>
					<view style="color: #626262;font-size: 30rpx;">分享至</view>
					<view class="iconfont icon-guanbi" style="position: absolute;right: 0%;"
						@tap="showShareModal=false"></view>
				</view>
				<view class="modalWrapper_main">

					<view @tap="shareWeChat()">
						<view>
							<image src="/static/image/WeChat.png" style="width: 100rpx;height: 100rpx;">
							</image>
						</view>
						<view style="color: #656565;font-size: 28rpx;">微信好友</view>
					</view>

					<view @tap="sharepyq()">
						<view>
							<image src="/static/image/circle_of_friends.png" style="width: 100rpx;height: 100rpx;">
							</image>
						</view>
						<view style="color: #656565;font-size: 28rpx;">朋友圈</view>
					</view>
				</view>
			</view>


		</view>

		<!-- 添加微信 -->
		<!-- <template v-if="addPersonalWeixin">
			<view class="my_addWx flex flex--row flex--align-items--center">
				<view class="my_addWx_title">请提交微信号和微信二维码</view>
				<view class="my_addWx_desc">当您下单完成时，接单员将需要通过您本次添加的微信号和微信二维码来完成您的订单任务。</view>
				<input type="text" v-model="weixinNumber" style="border:1px solid #ddd;border-radius: 5px;"
					placeholder="请输入微信号">
				<view class="my_addWx_code flex flex--align-items--center flex--justify-content--center"
					@click="clickWeixinCode">
					<text v-if="!codeImageData">点击添加微信二维码</text>
					<image v-else :src="myCode" mode="aspectFill"></image>
				</view>
				
				<view class="my_addWx_foot flex flex--align-items--center flex--justify-content--space-between">
					<view class="my_addWx_foot_left" @click="$emit('returnMy',1)">返回</view>
					<view class="my_addWx_foot_right" @click="preservation">保存</view>
				</view>
			</view>
		</template> -->
		<!-- 添加客服 -->
		<template v-if="addServWeixin">
			<view class="my_kf">
				<view class="my_kf_head flex flex--align-items--center flex--justify-content--space-between">
					<view class="my_kf_head_title">客服微信号</view>
					<text class="my_kf_head_code">{{ wxCode }}</text>
					<view class="my_kf_head_btn" @click="oneKeyCopy">一键复制</view>
				</view>
				<view class="my_kf_code flex flex--align-items--center flex--justify-content--center">
					<image :src="baseUrl + codeImage" mode=""></image>
				</view>
				<view class="my_kf_foot flex flex--align-items--center flex--justify-content--space-between">
					<view class="my_kf_foot_left" @click="$emit('returnMy',2)">返回</view>
					<view class="my_kf_foot_right" @click="preseCode">保存二维码</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import wx from 'weixin-js-sdk';
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'my',
		props: {
			addServWeixin: {
				type: Boolean
			},
			addPersonalWeixin: {
				type: Boolean
			},
			codeImage: {
				type: String
			},
			wxCode: {
				type: String
			},
			userInfo: {
				type: Object
			},
			orderCount: {
				type: Object
			}
		},
		data() {
			return {
				showShareModal: false,
				changeNickName: false,
				boxList: [
					{
						id: 4,
						src: "/static/image/cbnew.png",
						title: '我的钱包',
						desc: "在线寻找你的玩伴"
					},
				],
				orderTabList: [{
						id: 1,
						title: '进行中'
					},
					{
						id: 2,
						title: '已完成'
					},
					{
						id: 3,
						title: '取消中'
					},
					{
						id: 4,
						title: '已取消'
					}
				],
				weixinNumber: '',
				codeImageData: '',
				myCode: '',
				accountShow: false
			}
		},
		async created() {
			this.orderTabList[0].count = this.orderCount.jinxingzhong
			this.orderTabList[1].count = this.orderCount.yiwancheng
			this.orderTabList[2].count = this.orderCount.quxiaozhong
			this.orderTabList[3].count = this.orderCount.yiquxiao
			this.weixinNumber = this.userInfo.wx_num || ''
			const data = await this.$http('/appapi/system/info', {
				type: 2
			})
			this.codeImageData = data.content
			this.myCode = this.userInfo.wx_image
			this.accountShow = false;

			//配置网页API
			//this.getCofig()
		},
		computed: {
			...mapState(['baseUrl'])
		},
		methods: {
			logOut() {
				uni.showModal({
					title: '提示',
					content: '确认退出登录?',
					success(res) {
						if (res.confirm) {
							uni.clearStorageSync("token")
							uni.navigateTo({
								url: "/pages/login/login"
							})
						} else if (res.cancel) {
							console.log('用户点击取消')
							uni.showToast({
								title: "已取消",
								icon: "none"
							})
						}
					}
				})
			},
			editInfo() {
				uni.navigateTo({
					url: "/pages/userEdit/userEdit"
				})
			},
			getUrlParams(url) {
				var params = {};
				// 使用正则表达式匹配参数
				var matches = url.match(/[\?&]([^=#]+)=([^&#]*)/g);

				if (matches) {
					for (var i = 0; i < matches.length; i++) {
						var match = matches[i];

						// 去除 ? 或 & 符号
						match = match.substring(1);

						// 分割参数和值
						var pair = match.split("=");
						var key = decodeURIComponent(pair[0]);
						var value = decodeURIComponent(pair[1]);

						// 将参数添加到对象中
						params[key] = value;
					}
				}
				return params;
			},
			async getCofig() {
				console.log("获取扫码权限")
				let data = await this.$http('/appapi/member/get_signature')
				console.log(data)
				if (data) {
					wx.config({
						debug: false, // 开启调试模式,
						appId: data.appid, // 必填，企业号的唯一标识
						timestamp: data.timestamp, // 必填，生成签名的时间戳
						nonceStr: data.noncestr, // 必填，生成签名的随机串
						signature: data.signature, // 必填，签名
						jsApiList: ['scanQRCode'], // 必填，需要使用的JS接口列表
					});
					wx.ready(() => {
						console.log('成功获取扫码权限')
					})
					wx.error(function(res) {
						console.log('获取扫码权限出错了：' + res.errMsg); //wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
					});
				}
			},
			//扫码操作
			async scanCode() {
				console.log("====扫码了=====")
				//let data = await this.$http('/appapi/member/get_signature')
				// new Promise(function(resolve, reject) {
				// 	if (data) {
				// 		wx.config({
				// 			debug: false, // 开启调试模式,
				// 			appId: data.appid, // 必填，企业号的唯一标识
				// 			timestamp: data.timestamp, // 必填，生成签名的时间戳
				// 			nonceStr: data.noncestr, // 必填，生成签名的随机串
				// 			signature: data.signature, // 必填，签名
				// 			jsApiList: ['scanQRCode'], // 必填，需要使用的JS接口列表
				// 		});
				// 		wx.ready(() => {
				// 			resolve()
				// 			console.log('成功获取扫码权限')
				// 		})
				// 		wx.error(function(res) {
				// 			reject()
				// 			console.log('获取扫码权限出错了：' + res
				// 			.errMsg); //wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
				// 		});
				// 	}
				// }).then((res) => {
				// 	wx.scanQRCode({
				// 		needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				// 		scanType: ['qrCode'], // 可以指定扫二维码还是一维码，默认二者都有
				// 		success: function(res) {
				// 			console.log(res)
				// 			var url = res.resultStr
				// 			if (url.includes('https://qw.lod8.cn/')) {
				// 				var parameters = that.getUrlParams(url)
				// 				uni.navigateTo({
				// 					url: "/pages/scanCodeBinding/scanCodeBinding?bindType=" +
				// 						parameters
				// 						.action + "&id=" + parameters.id
				// 				})
				// 			}
				// 		},
				// 		fail: function(res) {
				// 			console.log("扫描失败", res)
				// 			uni.showToast({
				// 				title: JSON.stringify(res),
				// 				icon: "error"
				// 			})
				// 		},
				// 	});
				// })
				this.$emit('scanCode')
	},
	//修改微信昵称
	async changeUserName() {
			this.changeNickName = false
			let that = this;
			if (that.userInfo.nickname == "" || that.userInfo.length <= 0) {
				uni.showToast({
					title: "用户名不为空",
					icon: "none",
					duration: 3000
				})
				return
			}
			const data = await that.$http('/appapi/member/updateNick', {
				nick: that.userInfo.nickname
			})
			uni.showToast({
				title: data.msg,
				icon: "none",
				duration: 3000
			})
			//刷新当前用户名
			this.$parent.getUserInfo()
		},
		// 进入订单
		goOrder(id) {
			if (this.accountShow) return uni.showToast({
				title: '暂未开通',
				icon: 'none'
			});
			uni.navigateTo({
				url: '/pages/orderDetail/orderDetail?type=' + id
			})
		},
		// 一键复制
		oneKeyCopy() {
			let that = this
			uni.setClipboardData({
				data: this.wxCode,
				success() {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					})
				}
			})
		},
		// 保存二维码
		preseCode() {
			let that = this;
			uni.getSetting({
				success(res) {
					let data = res.authSetting['scope.writePhotosAlbum']
					// if (data) { return }
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success() {
							uni.downloadFile({
								url: 'https://qw.lvd8.cn/' + that.codeImage,
								success(val) {
									console.log(val)
									uni.saveImageToPhotosAlbum({
										filePath: val.tempFilePath,
										success() {
											uni.showToast({
												title: "保存成功",
												duration: 2000
											})
										}
									})
								}
							})
						},
						fail(err) {
							console.log(err)
							uni.showToast({
								title: '您没有开启相册权限',
								icon: 'none'
							})
						}
					})
				}
			})
		},
		menuOpen(id) {
			switch (id) {
				case 1:
					if (this.accountShow) return uni.showToast({
						title: '暂未开通',
						icon: 'none'
					});
					this.$emit('openAddPersonalWeixin')
					break;
				case 2:
					// if(this.accountShow) return
					// this.$emit('openAddKuWeixin')
					break;
				case 3:
					console.log("显示分享模态框")
					this.showShareModal = true
					break;
				case 4:
					uni.navigateTo({
						url: "/pages/my/wallet"
					})
					break;
				case 5:
					uni.navigateTo({
						url: "/pages/brokerInfoWorkStaging/brokerInfoWorkStaging"
					})
					break;
			}
		},
		// 点击上传二维码
		clickWeixinCode() {
			if (this.accountShow) return
			let that = this;
			uni.chooseImage({
				count: 1,
				success(res) {
					const tempFilePaths = res.tempFilePaths;
					uni.uploadFile({
						url: that.baseUrl + '/appapi/member/upload?token=' + uni.getStorageSync(
							"token"),
						name: 'file',
						filePath: tempFilePaths[0],
						fileType: 'image',
						async success(res) {
							console.log("-------------clickWeixinCode--------------------");
							console.log(res);
							that.myCode = JSON.parse(res.data).content
							const data = await that.$http('/appapi/system/info', {
								type: 2
							})
							that.codeImageData = data.content
						}
					})
					// const { data } = await this.$http
				}
			});
		},
		// 添加微信
		async preservation() {
			let that = this
			if (this.accountShow) return
			if (!this.weixinNumber) {
				uni.showToast({
					title: '请输入微信号',
					icon: 'none'
				})
				return
			}
			if (!this.myCode) {
				uni.showToast({
					title: '请添加二维码',
					icon: 'none'
				})
				return
			}
			const status = await this.$http('/appapi/member/wx_info', {
				wx_num: this.weixinNumber,
				wx_image: this.myCode
			})
			if (status) {
				that.$emit('returnMy', 1)
			}
		}
	}
	}
</script>

<style lang="less">
	.updateNameBtn {
		background-color: #FA97B4;
		color: #E8E8E8;
		padding: 0rpx 15rpx;
		height: 60rpx;
		line-height: 60rpx;
		box-sizing: border-box;
		font-size: 20rpx;
		border-radius: 20rpx;
		white-space: nowrap;
	}

	.my {
		height: 100%;
		background: #F8FAFF;
		padding: 12rpx 18rpx 0 18rpx;
		box-sizing: border-box;

		.my_head {
			height: 176rpx;
			background: #fff;
			padding: 0 20rpx;

			.headimageBox {
				border-radius: 50%;
				border: 1px solid #d8d8d8;
				width: 130rpx;
				height: 130rpx;
				overflow: hidden;
			}

			text {
				margin-left: 46rpx;
				font-size: 48rpx;
				font-weight: bold;
			}
		}

		.my_order {
			background: #fff;
			margin-top: 16rpx;
			padding: 22rpx 20rpx 52rpx 20rpx;

			.my_order_title {
				width: 186rpx;
				height: 46rpx;
				background: #F8C4D4;
				border-radius: 10rpx;
				line-height: 46rpx;
				text-align: center;
				font-size: 28rpx;
				color: #fff;
			}

			.my_order_box {
				margin-top: 52rpx;

				.my_order_box_list {
					text {
						font-size: 48rpx;
					}

					view {
						height: 44rpx;
						padding: 0 15rpx;
						line-height: 44rpx;
						text-align: center;
						background: #f8f8f8;
						font-size: 28rpx;
						margin-top: 38rpx;
					}
				}
			}
		}

		.my_box {
			width: 100%;

			.my_box_list {
				padding: 34rpx 46rpx;
				background: #fff;
				margin-top: 16rpx;
				position: relative;

				image {
					width: 82rpx;
					height: 82rpx;
				}

				.my_box_list_cen {
					flex: 1;
					padding-left: 48rpx;

					.my_box_list_cen_top {
						font-size: 32rpx;
						color: #2B3039;
					}

					.my_box_list_cen_bot {
						font-size: 20rpx;
						color: #D7D7D7;
					}
				}

				.my_box_list_btn {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
				}

				text {
					font-size: 28rpx;
					color: #BFBFBF;
				}
			}
		}

		.my_addWx {
			position: fixed;
			bottom: 100rpx;
			left: 0;
			width: 100%;
			padding: 98rpx 70rpx 66rpx 70rpx;
			box-sizing: border-box;
			background: #fff;
			box-shadow: 0 -16rpx 288rpx -52rpx rgba(0, 0, 0, 0.50);
			border-radius: 50rpx 50rpx 0 0;

			.my_addWx_title {
				padding: 5rpx 82rpx;
				background: #F7C3D3;
				font-size: 28rpx;
				color: #fff;
			}

			.my_addWx_desc {
				width: 530rpx;
				font-size: 24rpx;
				color: #7B7B7B;
				margin-top: 32rpx;
			}

			input {
				text-align: center;
				font-size: 28rpx;
				color: #FA97B4;
				margin-top: 36rpx;
			}

			.my_addWx_code {
				width: 530rpx;
				height: 290rpx;
				background: #F7F7F7;
				border-radius: 20rpx;
				margin: 64rpx 0;

				text {
					font-size: 28rpx;
				}

				image {
					width: 260rpx;
					height: 260rpx;
				}
			}

			.my_addWx_foot {
				width: 100%;

				view {
					width: 300rpx;
					height: 89rpx;
					line-height: 89rpx;
					text-align: center;
					font-size: 36rpx;
					color: #fff;
					border-radius: 8rpx;
				}

				.my_addWx_foot_left {
					background: #c1bfbf;
				}

				.my_addWx_foot_right {
					background: #FA97B4;
				}
			}
		}

		.my_kf {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 86rpx 70rpx 68rpx 70rpx;
			box-sizing: border-box;
			background: #fff;
			box-shadow: 0 -16rpx 288rpx -52rpx rgba(0, 0, 0, 0.50);
			border-radius: 50rpx 50rpx 0 0;

			.my_kf_head {
				.my_kf_head_title {
					padding: 5rpx 32rpx;
					background: #000;
					font-size: 28rpx;
					color: #fff;
				}

				.my_kf_head_code {
					flex: 1;
					padding: 0 20rpx;
					box-sizing: border-box;
					text-align: center;
					font-size: 28rpx;
					color: #07ACB6;
					overflow: hidden;
					white-space: normal;
					text-overflow: ellipsis;
				}

				.my_kf_head_btn {
					width: 156rpx;
					height: 54rpx;
					line-height: 54rpx;
					text-align: center;
					border: 1px solid #000;
					font-size: 28rpx;
					color: #242424;
				}
			}

			.my_kf_code {
				width: 100%;
				height: 474rpx;
				background: #F7F7F7;
				border-radius: 20rpx;
				margin-top: 48rpx;

				image {
					width: 400rpx;
					height: 400rpx;
				}
			}

			.my_kf_foot {
				width: 100%;
				margin-top: 66rpx;

				view {
					width: 300rpx;
					height: 89rpx;
					line-height: 89rpx;
					text-align: center;
					font-size: 36rpx;
					color: #fff;
					border-radius: 8rpx;
				}

				.my_kf_foot_left {
					background: #000;
				}

				.my_kf_foot_right {
					background: #0AAFB9;
				}
			}
		}
	}

	// 模态框样式
	.modalWrapper {
		width: 100vw;
		position: fixed;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		height: 100vh;
		z-index: 200;
		left: 0;
	}

	.modalWrapper_content {
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 30rpx;
		position: absolute;
		bottom: 0;
	}

	.modalWrapper_text {
		padding: 30rpx 0;
		color: #686868;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		gap: 20rpx;
	}

	.modalWrapper_main {
		display: flex;
		gap: 40rpx;
	}

	.modalWrapper_title {
		text-align: center;
		display: flex;
		justify-content: center;
		position: relative;
		margin: 38rpx 0;
	}
</style>